<template>
  <view class="container">
    <view class="header">
      <text class="title">历史订单</text>
    </view>
    
    <scroll-view 
      scroll-y 
      class="order-list" 
      @scrolltolower="loadMore"
      :style="{ height: 'calc(100vh - 160rpx)' }"
    >
      <view v-if="orders.length === 0 && !loading" class="empty-tip">
        <image class="empty-icon" src="/static/images/noData.png" mode="aspectFit"></image>
        <text class="empty-text">暂无历史订单</text>
      </view>
      
      <view v-for="order in orders" :key="order.id" class="order-card">
        <!-- 订单状态条 -->
        <view class="order-status-bar completed"></view>
        
        <!-- 订单信息 -->
        <view class="order-header">
          <view class="order-info">
            <text class="order-number">订单号：{{ order.id }}</text>
            <text class="order-time">完成时间：{{ formatTime(order.finishTime) }}</text>
          </view>
          <view class="order-status">
            <text class="status-text completed">已完成</text>
          </view>
        </view>
        
        <!-- 商家信息 -->
        <view class="merchant-info">
          <view class="merchant-name">
            <text class="name">{{ order.merchantName }}</text>
          </view>
          <view class="merchant-phone">
            <text class="phone">商家电话：{{ order.merchantPhone }}</text>
          </view>
        </view>
        
        <!-- 配送信息 -->
        <view class="delivery-info">
          <view class="delivery-address">
            <text class="label">送达地址：</text>
            <text class="address">{{ order.deliveryAddress }}</text>
          </view>
          <view class="delivery-fee">
            <text class="label">配送费：</text>
            <text class="fee">¥{{ order.deliveryFee }}</text>
          </view>
        </view>
        
        <!-- 订单详情按钮 -->
        <view class="order-actions">
          <view class="action-btn" @click="goToDetail(order.id)">
            <text class="btn-text">查看详情</text>
          </view>
        </view>
      </view>
      
      <!-- 加载更多提示 -->
      <view v-if="loading" class="loading-tip">
        <text class="loading-text">加载中...</text>
      </view>
      
      <view v-if="finished && orders.length > 0" class="finished-tip">
        <text class="finished-text">没有更多订单了</text>
      </view>
    </scroll-view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useUserStore } from '@/store/user'
import { getCompletedOrders } from '@/api/order'
import { formatDateTime } from '@/utils/time'

const userStore = useUserStore()

// 订单列表数据
const orders = ref([])
const loading = ref(false)
const finished = ref(false)
const pageNo = ref(1)
const pageSize = 10

// 格式化时间
const formatTime = (time) => {
  return formatDateTime(time)
}

// 加载订单列表
const loadOrders = async (refresh = false) => {
  if (loading.value || (finished.value && !refresh)) return
  
  try {
    loading.value = true
    
    if (refresh) {
      pageNo.value = 1
      finished.value = false
      orders.value = []
    }
    
    const res = await getCompletedOrders({
      deliveryId: userStore.deliveryId,
      pageNo: pageNo.value,
      pageSize
    })
    
    if (refresh) {
      orders.value = res.data.list
    } else {
      orders.value = [...orders.value, ...res.data.list]
    }
    
    // 判断是否还有更多数据
    if (orders.value.length >= res.data.total) {
      finished.value = true
    } else {
      pageNo.value++
    }
  } catch (error) {
    console.error('加载历史订单失败:', error)
    uni.showToast({ title: '加载失败', icon: 'none' })
  } finally {
    loading.value = false
  }
}

// 加载更多
const loadMore = () => {
  loadOrders()
}

// 查看订单详情
const goToDetail = (orderId) => {
  uni.navigateTo({
    url: `/pages/index/detail?id=${orderId}`
  })
}

onMounted(() => {
  loadOrders(true)
})
</script>

<style lang="scss">
.container {
  min-height: 100vh;
  background: $bg-gradient;
  padding: 0;
}

.header {
  padding: 80rpx 40rpx 40rpx;
  text-align: center;
  position: relative;
  
  &::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 120rpx;
    height: 8rpx;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 4rpx;
  }
}

.title {
  font-size: 48rpx;
  font-weight: 700;
  color: #ffffff;
  text-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.3);
}

.order-list {
  padding: 0 20rpx;
  width: auto;
}

.empty-tip {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 120rpx 0;
}

.empty-icon {
  width: 200rpx;
  height: 200rpx;
  margin-bottom: 40rpx;
  opacity: 0.6;
}

.empty-text {
  font-size: 32rpx;
  color: rgba(255, 255, 255, 0.8);
  text-align: center;
}

.order-card {
  @include card-style;
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(30rpx);
  border: 2rpx solid rgba(255, 255, 255, 0.3);
  margin-bottom: 32rpx;
  padding: 0;
  position: relative;
  overflow: hidden;
  width: 100%;
  box-sizing: border-box;
}

.order-status-bar {
  height: 8rpx;
  width: 100%;
  
  &.completed {
    background: linear-gradient(90deg, #52c41a 0%, #73d13d 100%);
  }
}

.order-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 32rpx 32rpx 24rpx;
  border-bottom: 1rpx solid rgba(0, 0, 0, 0.05);
  width: 100%;
  box-sizing: border-box;
}

.order-info {
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

.order-number {
  font-size: 32rpx;
  font-weight: 600;
  color: $text-primary;
  display: block;
  margin-bottom: 8rpx;
  word-wrap: break-word;
  word-break: break-all;
  overflow-wrap: break-word;
}

.order-time {
  font-size: 26rpx;
  color: $text-secondary;
}

.order-status {
  margin-left: 20rpx;
}

.status-text {
  font-size: 26rpx;
  font-weight: 600;
  padding: 8rpx 16rpx;
  border-radius: 20rpx;
  
  &.completed {
    color: #52c41a;
    background: rgba(82, 196, 26, 0.1);
  }
}

.merchant-info {
  padding: 24rpx 32rpx;
  border-bottom: 1rpx solid rgba(0, 0, 0, 0.05);
}

.merchant-name {
  margin-bottom: 12rpx;
}

.name {
  font-size: 34rpx;
  font-weight: 600;
  color: $text-primary;
}

.merchant-phone {
  .phone {
    font-size: 28rpx;
    color: $text-secondary;
    line-height: 1.4;
    word-wrap: break-word;
    word-break: break-all;
    overflow-wrap: break-word;
  }
}

.delivery-info {
  padding: 24rpx 32rpx;
  border-bottom: 1rpx solid rgba(0, 0, 0, 0.05);
}

.delivery-address {
  display: flex;
  margin-bottom: 12rpx;
  
  .label {
    font-size: 28rpx;
    color: $text-secondary;
    margin-right: 8rpx;
    flex-shrink: 0;
  }
  
  .address {
    font-size: 28rpx;
    color: $text-primary;
    line-height: 1.4;
    flex: 1;
    word-wrap: break-word;
    word-break: break-all;
    overflow-wrap: break-word;
  }
}

.delivery-fee {
  display: flex;
  align-items: center;
  
  .label {
    font-size: 28rpx;
    color: $text-secondary;
    margin-right: 8rpx;
  }
  
  .fee {
    font-size: 32rpx;
    font-weight: 600;
    color: $primary-color;
  }
}

.order-actions {
  padding: 24rpx 32rpx 32rpx;
  display: flex;
  justify-content: flex-end;
}

.action-btn {
  padding: 16rpx 32rpx;
  border: 2rpx solid $primary-color;
  border-radius: 24rpx;
  background: transparent;
  transition: all 0.3s ease;
  
  &:active {
    background: $primary-color;
    
    .btn-text {
      color: #ffffff;
    }
  }
}

.btn-text {
  font-size: 28rpx;
  color: $primary-color;
  font-weight: 600;
  transition: color 0.3s ease;
}

.loading-tip {
  text-align: center;
  padding: 40rpx 0;
}

.loading-text {
  font-size: 28rpx;
  color: rgba(255, 255, 255, 0.8);
}

.finished-tip {
  text-align: center;
  padding: 40rpx 0;
}

.finished-text {
  font-size: 28rpx;
  color: rgba(255, 255, 255, 0.6);
}
</style>